<template lang="pug">
  el-row(:gutter="20" v-loading="loading")
    el-col(:span="6")
      .panel.panel1
        img.iconBox(src="~@/assets/am.png")
        div
          h2
            span {{time}}
            span {{timeMix}}
          p
            span {{date}}
            span 星期{{day}}
    el-col(:span="4")
      .panel.panel2
        img.iconBox(src="~@/assets/wendu.png")
        div
          h2
            span {{ dataList.temperature }}
          p
            span 温度
    el-col(:span="4")
      .panel.panel3
        img.iconBox(src="~@/assets/shidu.png")
        div
          h2
            span {{ dataList.humidity }}
          p
            span 湿度
    el-col(:span="5")
      .panel.panel4
        img.iconBox(src="~@/assets/pm.png")
        div
          h2
            span {{ dataList.pm2_5 }}
          p
            span 空气质量(PM2.5)
    el-col(:span="5")
      .panel.panel5
        img.iconBox(src="~@/assets/cq.png")
        div
          h2
            span {{ 0 }}
          p
            span 二氧化碳浓度(CO2)
</template>
<script>
import dayjs from 'dayjs'
import { toChinesNum } from '@/utils/util'
import { getThermometer } from '@/api/article'

export default {
  props: {
    deviceId: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      loading: false,
      time: '',
      date: dayjs().format('YYYY年MM月DD日'),
      day: dayjs().get('d') === 0 ? '日' : toChinesNum(dayjs().get('d')),
      dataList: {
        temperature: 0,
        humidity: 0,
        pm2_5: 0,
        thermometerData: 0
      }
    }
  },
  computed: {
    timeMix () {
      return dayjs().get('hour') > 11 ? 'PM' : 'AM'
    }
  },
  watch: {
    deviceId: {
      immediate: true,
      handler: function (newValue, oldValue) {
        this.loading = true
        this.deviceId = newValue
        this.getThermometer()
      },
      deep: true // 启用深度监听
    }
  },
  created () {
    this.getThermometer()
    const timers = setInterval(() => {
      this.getThermometer()
    }, 1000 * 60)
    const timer = setInterval(() => {
      this.getTime()
    }, 1000)

    this.$on('hook:beforeDestroy', function () {
      clearInterval(timer)
      clearInterval(timers)
    })
  },
  methods: {
    getTime () {
      this.time = dayjs().format('HH:mm:ss')
    },

    async getThermometer () {
      const res = await getThermometer({ deviceId: this.deviceId })
      this.dataList = res
      this.loading = false
    }
  }
}
</script>
<style lang="scss" scoped>
.panel {
  background: #FEF9F9;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: center;
  img {
    width: 96px;
    height: 96px;
  }
  div{
    display: flex;
    justify-content: space-evenly;
    margin-left: 24px;
    flex-direction: column;
  }
  h2 {
    padding: 0;
    margin: 0;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bolder;
    font-size: 18px;
    color: #000000;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  p {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 16px;
    color: #55555C;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  span {
    + span {
      margin-left: 10px;
    }
  }

  &.panel1 {
  }

  &.panel2 {
    background-color: #F2F7FE;
    height: auto;
  }

  &.panel3 {
    background-color: #FEF8F2;
  }

  &.panel4 {
    background-color: #F2FEFE;
  }

  &.panel5 {
    background-color: #FEF2FE;
  }
}
</style>
